<template>
	<view class="rankdetail">
		<view><u-tabs name="cate_name" count="cate_count" :list="tabList" active-color="#1bb675" :current="current" @change="change"></u-tabs></view>
		<view class="rank-title">ESI国际排名 <text>200所</text></view>
		<view class="list" @touchstart="touchstart" @touchmove="touchmove" @touchend="touchend">
		    <!-- ref="sibList" @isRefresh='isRefresh' @scrolltolowerFn="scrolltolowerFn" 此三个必须写 -->
		    <sib-list ref="sibList" @scrolltolowerFn="scrolltolowerFn"  :scrollHeight="'100vh'">
		        <!-- 内部block可自定义 -->
		        <block slot="sibScrollList">
					<view class="item" v-for="(item,i) in list" :key="i" @click="goto(item);">
						<view class="item-head">
							<view class="num">{{i+1}}</view>
							{{item.schoolName}} 
							<view class="addr">{{item.schoolAttribute.split('|')[0]}}</view>
						</view>
						<view class="item-text">国际排名：{{item.esiRanking}}，前1%学科数：{{item.timesRanking}}</view>
						<view class="line"></view>
					</view>
				</block>
			</sib-list>
		</view>
	</view>
</template>

<script>
	import api from 'utils/api.js'
	import sibList from '@/components/sib-list/sib-list.vue'
	export default {
		components: {
		    sibList
		},
		data() {
			return {
				obj: {},
				list: [],
				page: 1,
				tabList: [{
					cate_name: '待收货'
				}, {
					cate_name: '待付款'
				}, {
					cate_name: '待评价',
				},{
					cate_name: '待收货'
				}, {
					cate_name: '待付款'
				}, {
					cate_name: '待评价',
				},{
					cate_name: '待收货'
				}, {
					cate_name: '待付款'
				}, {
					cate_name: '待评价',
				},{
					cate_name: '待收货'
				}, {
					cate_name: '待付款'
				}, {
					cate_name: '待评价',
				}],
				current: 0
			}
		},
		onLoad(options) {
			wx.setNavigationBarTitle({ title: options.title})
			if(options.subjectType == 1) {
				this.tabList = [{
					cate_name: 'ESI国际排名',
					value: 0
				},{
					cate_name: '双一流高校',
					value: 1
				},{
					cate_name: 'QS世界大学排名',
					value: 2
				},{
					cate_name: '泰晤士世界排名',
					value: 3
				},{
					cate_name: 'U.SNews排名',
					value: 4
				},{
					cate_name: '985高校',
					value: 5
				},{
					cate_name: '211高校',
					value: 6
				},{
					cate_name: '中央部属高校',
					value: 7
				},{
					cate_name: '部省合建高校',
					value: 8
				},{
					cate_name: '软科2020',
					value: 9
				},{
					cate_name: '校友会2020',
					value: 10
				},{
					cate_name: '武书连2020',
					value: 11
				}]
			}else if(options.subjectType == 2) {
				this.tabList = [{
					cate_name: 'GDI高职高专榜',
					value: 12
				},{
					cate_name: '专科TOP 100',
					value: 13
				},{
					cate_name: '高职双高计划',
					value: 14
				},{
					cate_name: '优质专科高职',
					value: 15
				},{
					cate_name: '国家示范高职',
					value: 16
				},{
					cate_name: '国家骨干高职',
					value: 17
				}]
			}
			this.obj = options;
			uni.showLoading({
			    title: '加载中...',
			    mask: true
			})
			this.getList('first');
		},
		methods: {
			goto(item) {
				uni.setStorageSync('obj', item)
				uni.navigateTo({
					url: "./universityDetail1"
				})
			},
			change(e) {
				this.current = e;
				this.obj.rankingsType = this.tabList[e].value;
				this.page = 1;
				this.getList('first');
			},
			// 刷新touch监听
			touchstart: function(e) {
			    this.$refs.sibList.refreshStart(e);
			},
			touchmove: function(e) {
			    this.$refs.sibList.refreshMove(e);
			},
			touchend: function(e) {
			    this.$refs.sibList.refreshEnd(e);
			},
			scrolltolowerFn: function() {
			    uni.showLoading({
			        title: '加载中...',
			        mask: true
			    })
				this.page++;
				this.getList();
			},
			getList(type) {
				this.http({
					url: `${api.ServerUrlW}api/v1/rankings/schoolRankings?pageNum=${this.page}&pageSize=20`,
					method: 'POST',
					data: {
						subjectType: this.obj.subjectType,
						rankingsType: this.obj.rankingsType
					},
					success: res => {
						uni.hideLoading()
						if(res.code == 0) {
							if(type == 'first') {
								this.$refs.sibList.toTopClick();
								this.list = res.result
							}else {
								for (let s of res.result) {
									this.list.push(s)
								}
							}
						}
					},
				})
			}
		},
	}
</script>

<style lang="less" scoped>
	.rankdetail {
		.item {
			padding: 16rpx 30rpx;
			background-color: #FFFFFF;
			.item-head {
				line-height: 40rpx;
				.num {
					float: left;
					width: 40rpx;
					line-height: 40rpx;
					text-align: center;
					background-color: #1bb675;
					margin-right: 20rpx;
					color: #FFFFFF;
				}
				.addr {
					float: right;
					font-size: 24rpx;
				}
			}
			.item-text {
				color: #C0C0C0;
				padding-left: 60rpx;
				margin-top: 30rpx;
				font-size: 26rpx;
			}
			.line {
				border-bottom: 1px solid #e6e2e2;
				margin-left: 60rpx;
				margin-top: 40rpx;
			}
		}
	}
	.rank-title {
		background-color: #F5F5F5;
		color: #1bb675;
		padding: 20rpx;
		text {
			color: #333;
			float: right;
		}
	}
</style>
<style>
	page {
		background-color: #F5F5F5;
	}
</style>
